<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户数据管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <script src="../layui/layui.all.js" charset="utf-8"></script>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>
        <script type="text/html" id="barDemo">
            {{#  if(d.superRoot == "否"){ }}
            <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">授权管理员</a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-xs " lay-event="edit">撤销管理员</a>
            {{#  } }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>


        <script>
            layui.use('element', function () {
                var element = layui.element;
            });

            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#test'
                    , url: 'http://localhost:8080/root/userTable'
                    , toolbar: '#toolbarDemo'
                    , title: '用户数据表'
                    , totalRow: true
                    , cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'username', title: '用户名', width: '12%', edit: 'text'}
                        , {
                            field: 'email', title: '邮箱', width: '12%', edit: 'text', templet: function (res) {
                                return '<em>' + res.email + '</em>'
                            }
                        }
                        , {field: 'password', title: '密码', width: '12%'}
                        , {field: 'age', title: '年龄', width: '6%', edit: 'text', sort: true}
                        , {field: 'Tel', title: '电话号码', width: '12%'}
                        , {field: 'address', title: '地址', width: '12%'}
                        , {field: 'ip', title: 'IP', width: '12%'}
                        , {field: 'sex', title: '性别', width: '6%'}
                        , {field: "superRoot", title: "授权管理员&&删除操作", width: '12%', templet: '#barDemo'}

                    ]]
                    , page: true
                });

                //工具栏事件
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选')
                            break;
                    }

                });

                //侧工具栏事件
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    var superRoot = data.superRoot;
                    var message = {username: data.username, superRoot: data.superRoot};

                    if (obj.event === 'del') {
                        layer.confirm('确定执行此操作？', function (index) {
                            $.ajax({
                                data: JSON.stringify(message),
                                url: 'http://localhost:8080/table/deleteUser',
                                type: 'post',
                                contentType: 'application/json;charset=utf-8',
                                success: function () {
                                    layer.msg("ok");
                                    layer.close(index)
                                },
                                error: function (data) {
                                    layer.msg(data.result1);
                                }
                            })
                        });
                    } else if (obj.event === 'edit') {
                        layer.confirm('确定执行此操作？', function (index) {
                            $.ajax({
                                data: JSON.stringify(message),
                                url: 'http://localhost:8080/table/changeRoot',
                                type: 'post',
                                contentType: 'application/json;charset=utf-8',
                                success: function (data) {
                                    layer.msg("ok");
                                    superRoot == "是" ? obj.update({
                                        superRoot: "否"
                                    }) : obj.update({
                                        superRoot: '是'
                                    });
                                },
                                error: function (data) {
                                    layer.msg(data.result1);
                                }
                            })
                        });
                    }
                });
            });
        </script>
</body>
</html>